<template>
  <div class="login-state">
    <n-row v-if="store.state.auth">
      <n-icon :size="36">
        <svg
          t="1630222568546"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5438"
          width="200"
          height="200"
        >
          <path
            d="M512 85.341091c235.636364 0 426.658909 191.022545 426.658909 426.658909 0 235.636364-191.022545 426.658909-426.658909 426.658909-235.636364 0-426.658909-191.022545-426.658909-426.658909C85.341091 276.363636 276.363636 85.341091 512 85.341091z m85.643636 264.541091a141.707636 141.707636 0 0 0-141.614545 136.378182l-0.093091 5.306181v82.990546c0 18.199273-13.591273 36.421818-40.797091 54.690909l-5.236364 3.397818h-33.233454v-37.911273c0-26.251636-12.567273-50.827636-33.605818-66.210909l-4.049455-2.769454-3.490909 3.677091a82.432 82.432 0 0 0-20.968727 50.013091l-0.162909 5.073454v57.134546l-25.367273 6.050909a55.435636 55.435636 0 0 0-42.356364 49.896727l-0.139636 4.026182h2.653091a169.425455 169.425455 0 0 0 108.008727-38.865455l5.585455-4.864 47.127272 32.651637h19.549091c85.690182-0.139636 141.405091-2.978909 167.168-8.471273 34.978909-7.470545 85.410909-44.520727 110.475637-92.858182l2.885818-5.864727-21.643636 10.449454-5.399273 2.420364a108.8 108.8 0 0 1-79.685818 1.768727l-5.492364-2.187636-29.719273-12.776727-1.978182 1.838545a28.439273 28.439273 0 0 1-9.704727 5.352727 5.888 5.888 0 0 1-7.447273-4.026181 6.167273 6.167273 0 0 1 2.699637-7.051637l1.28-0.581818 1.629091-0.605091a17.524364 17.524364 0 0 0 9.658182-20.48l-0.744728-2.257454a6.167273 6.167273 0 0 1 3.141818-7.959273 5.818182 5.818182 0 0 1 7.726546 3.234909c2.56 6.283636 2.885818 12.986182 1.28 19.130182l-0.930909 3.025454 27.648 11.892364 5.236363 2.094545a97.326545 97.326545 0 0 0 70.656-1.559272l5.166546-2.327273 32.116364-15.522909 1.000727-0.349091 1.745454-5.841455c4.421818-16.151273 8.145455-36.794182 11.264-61.998545a132.887273 132.887273 0 0 0-131.863272-149.178182z m20.410182 120.901818a28.997818 28.997818 0 0 1 36.864 0.162909l2.397091 2.187636 2.397091-2.210909a28.788364 28.788364 0 0 1 36.910545 0.069819l2.513455 2.327272 4.096 4.305455 0.930909 1.303273c1.28 2.327273 0.930909 5.352727-1.000727 7.307636a5.771636 5.771636 0 0 1-7.098182 0.930909l-1.233455-0.977455-4.18909-4.375272-1.95491-1.768728a17.268364 17.268364 0 0 0-21.061818-0.046545l-2.001454 1.768727-4.328728 4.445091-1.256727 1.000727a5.748364 5.748364 0 0 1-5.888-0.046545l-1.256727-1.024-3.956364-4.212364-1.978182-1.792a17.268364 17.268364 0 0 0-21.038545-0.232727l-2.001455 1.768727-4.538181 4.584728-1.256728 0.977454a5.771636 5.771636 0 0 1-7.074909-1.070545 6.237091 6.237091 0 0 1-0.907636-7.307637l0.977454-1.303272 4.538182-4.584728 2.397091-2.187636z m-1.396363-173.893818c16.616727-7.540364 6.050909-28.625455-13.032728-24.855273-19.060364 3.793455-25.902545 36.096-25.902545 36.096 11.170909-10.705455 22.341818-3.700364 38.935273-11.240727z m-92.020364-49.664c-27.531636-5.957818-42.775273 27.182545-18.781091 39.028363 23.970909 11.845818 40.098909 0.814545 56.203636 17.640728l-0.930909-4.096c-3.048727-12.194909-13.730909-47.662545-36.491636-52.573091z"
            fill="#ffffff"
            p-id="5439"
          ></path>
        </svg>
      </n-icon>
      <n-dropdown
        :options="options"
        placement="bottom-end"
        @select="handleSelect"
        trigger="click"
      >
        <n-button
          round
          icon-placement="right"
          :bordered="false"
          color="rgba(255,255,255,0.6)"
          text-color="#111"
        >
          <template #icon>
            <n-icon>
              <chevron-down />
            </n-icon>
          </template>
          {{
            store.state.auth ? store.getters.getUserInfo.username : '尊敬的用户'
          }}
        </n-button>
      </n-dropdown>
    </n-row>
    <n-row v-else>
      <n-button
        round
        type="primary"
        style="margin-top: 0.3vh"
        @click="router.push('/login')"
      >
        登录/注册
      </n-button>
    </n-row>
  </div>
</template>

<script setup lang="ts">
// 图标
import { h, defineComponent } from 'vue';
import { NIcon } from 'naive-ui';
import {
  PersonCircleOutline as UserIcon,
  Pencil as EditIcon,
  LogOutOutline as LogoutIcon,
  ChevronDown,
} from '@vicons/ionicons5';

import { ref } from 'vue';
import { useStore } from 'vuex';

import { useRouter } from 'vue-router';
import { switchLight } from 'naive-ui/lib/switch/styles';

const renderIcon = (icon: any) => {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon),
    });
  };
};

const store = useStore();

const router = useRouter();

// 点击事件
const handleSelect = (key: string) => {
  switch (key) {
    case 'logout':
      store.commit('updateAuth', {
        auth: '',
      });
      router.push('/home');
      break;
    default:
      break;
  }
};
// 下拉菜单
const options = [
  {
    label: '退出登录',
    key: 'logout',
    icon: renderIcon(LogoutIcon),
  },
];
</script>

<style scoped lang="scss">
.login-state {
  padding-bottom: 1.5vh;
  margin-left: 1vw;
  min-width: 8rem;
}
</style>
